{% extends "base/nav.html" %}
{% load static %}

{% block title %}回复评论 - 旅游舆情监测{% endblock %}

{% block css %}
<style>
    .reply-container {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .parent-comment {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        border-left: 4px solid #007bff;
    }
    
    .parent-comment-header {
        display: flex;
        justify-content: between;
        align-items: center;
        margin-bottom: 10px;
    }
    
    .parent-comment-author {
        font-weight: bold;
        color: #007bff;
    }
    
    .parent-comment-content {
        line-height: 1.6;
        color: #333;
    }
    
    .reply-form-container {
        background: white;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .reply-preview {
        background: #e7f3ff;
        border-radius: 8px;
        padding: 15px;
        margin-top: 15px;
        border-left: 3px solid #007bff;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="reply-container">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="text-center">
                    <i class="fas fa-reply me-2"></i>回复评论
                </h2>
                <p class="text-center text-muted">回复 {{ parent_comment.author.username }} 的评论</p>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <!-- 父评论显示 -->
                <div class="parent-comment">
                    <div class="parent-comment-header">
                        <div>
                            <span class="parent-comment-author">{{ parent_comment.author.username }}</span>
                            <small class="text-muted ms-2">{{ parent_comment.created_at|date:"Y-m-d H:i" }}</small>
                            {% if parent_comment.sentiment_type %}
                            <span class="badge ms-2 
                                {% if parent_comment.sentiment_type == 'positive' %}bg-success
                                {% elif parent_comment.sentiment_type == 'negative' %}bg-danger
                                {% else %}bg-secondary{% endif %}">
                                {{ parent_comment.get_sentiment_type_display }}
                            </span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="parent-comment-content">
                        <p class="mb-0">{{ parent_comment.content }}</p>
                    </div>
                </div>

                <!-- 回复表单 -->
                <div class="reply-form-container">
                    <form method="post" id="reply-form">
                        {% csrf_token %}
                        
                        <!-- 显示表单错误 -->
                        {% if form.errors %}
                        <div class="alert alert-danger">
                            <strong>请修正以下错误：</strong>
                            <ul class="mb-0">
                                {% for field in form %}
                                    {% for error in field.errors %}
                                        <li>{{ field.label }}: {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                                {% for error in form.non_field_errors %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}

                        <!-- 回复内容 -->
                        <div class="form-group">
                            <label for="{{ form.content.id_for_label }}" class="form-label">
                                <i class="fas fa-edit me-1"></i>回复内容
                            </label>
                            <textarea name="content" id="id_content" class="form-control" rows="5" 
                                      placeholder="请输入回复内容..." required>{{ form.content.value|default:'' }}</textarea>
                            {% if form.content.help_text %}
                            <small class="form-text text-muted">{{ form.content.help_text }}</small>
                            {% endif %}
                        </div>

                        <!-- 预览区域 -->
                        <div class="reply-preview d-none" id="reply-preview">
                            <h6><i class="fas fa-eye me-1"></i>预览：</h6>
                            <p id="preview-content" class="mb-0"></p>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div>
                                <a href="{% url 'main:attraction_detail' parent_comment.attraction.pk %}" 
                                   class="btn btn-secondary">
                                    <i class="fas fa-arrow-left me-1"></i>返回详情页
                                </a>
                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-info me-2" id="preview-btn">
                                    <i class="fas fa-eye me-1"></i>预览
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-paper-plane me-1"></i>提交回复
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 回复提示 -->
                <div class="alert alert-info mt-4">
                    <h6><i class="fas fa-info-circle me-1"></i>回复须知：</h6>
                    <ul class="mb-0">
                        <li>请保持礼貌和尊重的语气</li>
                        <li>回复内容应相关且有建设性</li>
                        <li>回复后无法修改，请仔细检查后再提交</li>
                        <li>不当内容可能会被管理员删除</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const contentTextarea = document.getElementById('id_content');
        const previewBtn = document.getElementById('preview-btn');
        const previewSection = document.getElementById('reply-preview');
        const previewContent = document.getElementById('preview-content');
        const replyForm = document.getElementById('reply-form');

        // 预览功能
        previewBtn.addEventListener('click', function() {
            const content = contentTextarea.value.trim();
            
            if (content) {
                previewContent.textContent = content;
                previewSection.classList.remove('d-none');
                
                // 滚动到预览区域
                previewSection.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });
            } else {
                alert('请输入回复内容后再预览');
                contentTextarea.focus();
            }
        });

        // 表单提交前的验证
        replyForm.addEventListener('submit', function(e) {
            const content = contentTextarea.value.trim();
            
            if (!content) {
                e.preventDefault();
                alert('请输入回复内容');
                contentTextarea.focus();
                return;
            }

            if (content.length < 5) {
                e.preventDefault();
                alert('回复内容太短，请至少输入5个字符');
                contentTextarea.focus();
                return;
            }

            // 显示加载状态
            const submitBtn = this.querySelector('button[type="submit"]');
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>提交中...';
        });

        // 自动调整文本区域高度
        contentTextarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });

        // 页面加载时聚焦到内容输入框
        contentTextarea.focus();
    });
</script>
{% endblock %}